<!--
 @description 选择设计师
 @fileName SelectDesigner.vue
 @author zengqiongying
 @created 2022/11/01 10:15:34
-->
<template>
  <div class="bg_white">
    <ComHeader title="选择设计师" bg-color="#FFFFFF" />
    <div class="designer-page-search">
      <van-search
        v-model="searchValue"
        class="search-field"
        placeholder="可按姓名搜索"
        @search="handleSearch"
        @cancel="handleSearch"
        @clear="handleSearch"
      />
    </div>
    <List
      ref="list"
      :class="{'desinger-list-scroll':list.length>0}"
      :finished.sync="finished"
      :reset-fun="resetData"
      :load="load"
      :refresh="load"
    >
      <div v-for="(item,i) in list" :key="i" class="designer-item">
        <div class="item-avatar">
          <ImageVideo round lazy-load fit="cover" :src="item.avatar" />
        </div>
        <div class="item-content">
          <div class="d-flex">
            <div class="d-name">{{ item.name }}</div>
            <div v-for="(name,j) in filterPostionList(item.positionName)" :key="j" class="d-position">
              {{ name }}
            </div>
          </div>
          <!-- <div class="d-opty">商机 5 个</div> -->
          <div class="d-store">{{ item.shopNames }}</div>
        </div>
        <div class="item-btn">
          <div class="btn-select" @click="handleSelected(item)">
            <img src="@/assets/img/icon-time.png" class="icon">
            <span class="txt">选择</span>
          </div>
        </div>
      </div>
    </List>
  </div>
</template>

<script>
import List from '@/components/List'
import ImageVideo from '@/components/ImageVideo'
import { employeePage } from '@/apis/customer'
export default {
  name: 'CustomerSelectDesigner',
  components: { List, ImageVideo },
  filters: {},
  mixins: [],
  data() {
    return {
      orgCode: this.$route.query.orgCode, // 门店编码
      searchValue: '',
      filterRaws: {},
      list: [],
      finished: false // 列表是否加载完成
    }
  },

  computed: {

  },

  created() {},
  activated() {},

  mounted() {},

  methods: {
    handleSearch() {
      this.resetPageData()
    },
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, rows) {
      const paramsRaw = {
        positionCodes: ['top_design_mg', 'top_designer'],
        disOrgCodes: [this.orgCode]
      }
      if (this.searchValue) {
        paramsRaw.employeeName = this.searchValue
      }

      const data = new FormData()
      data.append('page', page)
      data.append('rows', rows)
      data.append('paramsRaw', JSON.stringify(paramsRaw))

      return employeePage(data).then(res => {
        const records = res.data.records || []
        this.list.push(...records)
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    },
    filterPostionList(name) {
      const arrTmp = name.split(',')
      const res = arrTmp.filter(v => v === '设计师' || v === '设计主管')
      return res
    },
    handleSelected(item) {
      localStorage.setItem('custom-add-designer', JSON.stringify(item))
      this.$router.go(-1)
    }
  }
}

</script>
<style lang='less' scoped>
  .desinger-list-scroll{
    padding-top: 54px;
    min-height: calc(100vh - 46px - 54px);
    box-sizing: border-box;
  }
  .designer-page-search{
    position: fixed;
    top: 46px;
    left: 0;
    width: 100%;
    padding: 10px 16px;
    box-sizing: border-box;
    z-index: 999;
    background: #fff;
    .search-field{
      width: 100%;
      height: 34px;
      background: #F6F7F8;
      border-radius: 17px;
      overflow: hidden;
      display: flex;
      align-items: center;
      /deep/ .van-cell{
        width: 100%;
        padding-top:10px;
        padding-bottom: 10px;
        background: #F6F7F8;
        .van-field__left-icon{
          margin-right: 10px;
          .van-icon{
            color: #7D8091;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }
  }
  .designer-item{
    position: relative;
    padding: 24px 16px 22px 16px;
    display: flex;
    &:first-child{
      padding-top: 14px;
    }
    &::after{
      position: absolute;
      content: '';
      left: 16px;
      right: 16px;
      bottom: 0;
      height: 1px;
      background: #EEEEF3;
      // -webkit-transform: scaleY(0.5);
      // transform: scaleY(0.5);
    }
    &:last-child::after{
      height: 0;
    }
    .item-avatar{
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }
    .item-btn{
      padding: 8px 0;
      .btn-select{
        width: 80px;
        height: 32px;
        background: rgba(22, 188, 131, 0.12);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon{
          width: 16px;
          height: 16px;
          margin-right: 8px;
        }
        .txt{
          color: #16BC83;
          font-size: 12px;
          font-weight: bold;
          line-height: 18px;
        }
      }
    }
    .item-content{
      flex: 1;
      margin:0 16px;
    }
    .d-flex{
      display: flex;
      align-items: center;
    }
    .d-name{
      height: 22px;
      line-height: 22px;
      color: #343640;
      font-weight: bold;
      font-size: 16px;
      white-space: nowrap;
    }
    .d-position{
      margin-left: 10px;
      display: inline-block;
      padding: 0 10px;
      border: 1px solid rgba(52, 54, 64, 0.1);
      border-radius: 10px;
      color: #7D8091;
      font-size: 10px;
      line-height: 18px;
    }
    .d-opty{
      margin-top: 14px;
      height: 18px;
      line-height: 18px;
      color: #16BC83;
      font-size: 12px;
      padding-left: 20px;
      background-image: url(~@/assets/img/icon-opty-lit.png);
      background-size: 42px 42px;
      background-position: -13px -13px;
      background-repeat: no-repeat;
    }
    .d-store{
      margin-top: 5px;
      color: #7D8091;
      font-size: 12px;
      min-height: 18px;
      line-height: 18px;
    }
  }
</style>
